<template>
  <div style="background-color: white; height: 32px">
    <a-tabs size="mini" v-model:active-key="activePage">
      <a-tab-pane key="包装" title="包装"></a-tab-pane>
      <!-- <a-tab-pane key="配件" title="配件"></a-tab-pane> -->
    </a-tabs>
  </div>
  <packIndex v-if="activePage == '包装'" />
  <assessoriesIndex v-else />
</template>

<script lang="ts" setup>
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import packIndex from './pack/packIndex.vue'
  import assessoriesIndex from './accessories/accessoriesIndex.vue'
  let activePage = ref('包装')
</script>

<style lang="less" scoped>
  .ingredients-container {
    height: calc(100vh - @menuAndTabHeight);
  }

  .arco-scrollbar-type-embed {
    height: 100%;
  }

  .item {
    width: 242px;
    // box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
    // box-shadow: 0 0 2px 2px #eee;
    // border: 1px solid red;
    .img {
      width: 240px;
      height: 240px;
    }
  }
</style>
